<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仪表盘 - 资产管理系统</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css"
        rel="stylesheet">
    <script src="/xlsx/xlsx.core.min.js"></script>
    <!-- 引入Vue3 -->
    <script src="/vue/vue.global.prod.js"></script>
    <style>
        :root {
            --primary-color: #4e73df;
            --secondary-color: #f8f9fa;
            --dark-color: #343a40;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
            --info-color: #17a2b8;
            --light-color: #f8f9fa;
            --muted-color: #6c757d;
        }

        body {
            background-color: #f8f9fc;
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 14px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 导航栏保持全宽 */
        .navbar {
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
            padding: 0.5rem 0;
            background-color: var(--primary-color);
            transition: background-color 0.3s ease;
            width: 100%;
        }

        .navbar:hover {
            background-color: #4367d6;
        }

        .navbar-brand {
            font-weight: 600;
            font-size: 1.35rem;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* 主要内容区域调整为85%宽度 */
        .container {
            width: 85%;
            max-width: 85%;
            padding-bottom: 1.5rem;
            flex: 1;
            margin: 0 auto;
        }

        .search-panel {
            background: white;
            padding: 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
            margin-bottom: 1.5rem;
            border: 1px solid #e3e6f0;
        }

        .table-responsive {
            border-radius: 0.5rem;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
            background: white;
            overflow-x: auto;
            border: 1px solid #e3e6f0;
        }

        .table {
            width: 100%;
            table-layout: auto;
            margin-bottom: 0;
            font-size: 13px;
            color: #5a5c69;
        }

        .table-dark {
            background-color: var(--primary-color) !important;
            font-size: 13px;
            color: white;
        }

        .table th,
        .table td {
            white-space: normal;
            word-wrap: break-word;
        }

        /* 为特定列设置固定宽度 */
        .table td:nth-child(12) {
            max-width: 200px;
            min-width: 100px;
        }

        .table td:not(:nth-child(12)):not(:nth-child(13)) {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .table-hover tbody tr:hover {
            background-color: rgba(78, 115, 223, 0.05);
        }

        .asset-image {
            height: 80px;
            width: auto;
            object-fit: contain;
            margin: 3px;
            border: 1px solid #eee;
            border-radius: 3px;
            transition: transform 0.3s;
        }

        .asset-image:hover {
            transform: scale(1.05);
        }

        .image-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 5px;
        }

        .btn-outline-light {
            border-color: rgba(255, 255, 255, 0.3);
            padding: 5px 10px;
            font-size: 13px;
        }

        .action-btn {
            white-space: nowrap;
            padding: 5px 10px;
            font-size: 12px;
            margin: 2px;
            border-radius: 0.25rem;
            transition: all 0.2s ease;
        }

        .action-btn:hover {
            transform: translateY(-1px);
        }

        .modal-header {
            background-color: var(--primary-color);
            color: white;
            padding: 1rem;
            border-radius: 0.35rem 0.35rem 0 0;
        }

        .modal-title {
            font-size: 1.1rem;
            font-weight: 600;
        }

        .modal-body,
        .modal-footer {
            padding: 1rem;
        }

        .form-label {
            font-weight: 500;
            margin-bottom: 0.3rem;
            font-size: 13px;
            color: #5a5c69;
        }

        .form-control-sm,
        .form-select-sm {
            font-size: 13px;
            padding: 0.375rem 0.75rem;
            border: 1px solid #d1d3e2;
            border-radius: 0.35rem;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        .form-control-sm:focus,
        .form-select-sm:focus {
            border-color: #bac8f3;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
        }

        .loading-spinner {
            display: inline-block;
            width: 1rem;
            height: 1rem;
            border: 2px solid rgba(0, 0, 0, .1);
            border-radius: 50%;
            border-top-color: var(--primary-color);
            animation: spin 1s ease-in-out infinite;
        }

        .status-badge {
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 12px;
            font-weight: 500;
            display: inline-block;
        }

        .status-normal {
            background-color: var(--success-color);
            color: white;
        }

        .status-repairing {
            background-color: var(--warning-color);
            color: #212529;
        }

        .status-scrapped {
            background-color: var(--danger-color);
            color: white;
        }

        .status-idle {
            background-color: var(--muted-color);
            color: white;
        }

        .pagination {
            display: flex;
            gap: 0.25rem;
        }

        .page-item {
            margin: 0;
        }

        .page-link {
            padding: 0.375rem 0.75rem;
            border: 1px solid #d1d3e2;
            color: var(--primary-color);
            border-radius: 0.35rem;
            transition: all 0.2s ease;
        }

        .page-link:hover {
            background-color: #eaecf4;
            border-color: #d1d3e2;
        }

        .page-item.active .page-link {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: white;
        }

        .page-item.disabled .page-link {
            color: #b7b9cc;
            pointer-events: none;
            background-color: #f8f9fc;
            border-color: #d1d3e2;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* 卡片样式 */
        .card {
            background: white;
            border-radius: 0.5rem;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
            border: 1px solid #e3e6f0;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 0.5rem 1.5rem 0 rgba(58, 59, 69, 0.2);
        }

        .card-body {
            padding: 1.5rem;
        }

        /* 按钮动画效果 */
        .btn-animated {
            position: relative;
            overflow: hidden;
        }

        .btn-animated:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.3);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transform-origin: 50% 50%;
        }

        .btn-animated:active:after {
            animation: ripple 0.6s ease-out;
        }

        @keyframes ripple {
            0% {
                transform: scale(0, 0);
                opacity: 0.5;
            }

            100% {
                transform: scale(20, 20);
                opacity: 0;
            }
        }

        /* 页脚保持全宽 */
        footer {
            background-color: white;
            border-top: 1px solid #e3e6f0;
            padding: 1rem 0;
            margin-top: auto;
            width: 100%;
        }

        .footer-links {
            display: flex;
            gap: 1rem;
        }

        .footer-links a {
            color: var(--muted-color);
            transition: color 0.2s ease;
        }

        .footer-links a:hover {
            color: var(--primary-color);
            text-decoration: none;
        }

        /* 响应式调整 */
        @media (max-width: 1200px) {
            .container {
                width: 90%;
                max-width: 90%;
            }
        }

        @media (max-width: 768px) {
            .container {
                width: 95%;
                max-width: 95%;
                padding-left: 15px;
                padding-right: 15px;
            }

            .table-responsive {
                border-radius: 0;
            }

            .table th,
            .table td {
                padding: 0.5rem;
                white-space: normal !important;
            }

            .action-btn {
                padding: 0.25rem 0.5rem;
                font-size: 11px;
            }

            .search-panel {
                padding: 1rem;
            }
        }

        @media (max-width: 576px) {
            .container {
                width: 100%;
                max-width: 100%;
            }
        }

        /* 导航栏补充样式 */
        .nav-link {
            position: relative;
            overflow: hidden;
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            transition: all 0.2s ease;
        }

        .nav-link:not(.active):after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: white;
            transition: width 0.3s ease;
            border-radius: 2px;
        }

        .nav-link:not(.active):hover:after {
            width: 100%;
        }

        .nav-link.active {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .navbar-brand svg {
            transition: transform 0.3s ease;
        }

        .navbar-brand:hover svg {
            transform: scale(1.1);
        }

        .btn-outline-light {
            border-width: 1.5px;
        }

        /* 适配深色模式的过渡效果 */
        @media (prefers-color-scheme: dark) {
            .navbar {
                background-color: #3a5bc9;
            }

            .navbar:hover {
                background-color: #324dab;
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 导航栏保持不变 -->
        <nav class="navbar navbar-expand-lg navbar-dark">
            <div class="container py-2">
                <a class="navbar-brand" href="#">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4 6H20V20H4V6Z" stroke="white" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <path d="M4 10H20" stroke="white" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <path d="M8 6V2" stroke="white" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <path d="M16 6V2" stroke="white" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg>
                    资产管理系统
                </a>

                <button class="navbar-toggler py-1" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                    style="border-color: rgba(255,255,255,0.3);">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav me-auto align-items-center gap-1">
                        <li class="nav-item">
                            <a class="nav-link active" href="/dashboard">
                                <i class="fa fa-dashboard mr-1"></i> 首页
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/report">
                                <i class="fa fa-plus-circle mr-1"></i> 资产上报
                            </a>
                        </li>
                        <li class="nav-item" v-if="isAdmin">
                            <a class="nav-link" href="/admin/users">
                                <i class="fa fa-users mr-1"></i> 用户管理
                            </a>
                        </li>
                    </ul>

                    <div class="d-flex align-items-center">

                        <a href="/logout" class="btn btn-outline-light btn-sm rounded-pill px-4 py-1.5">
                            <i class="fa fa-sign-out mr-1"></i> 退出
                        </a>
                    </div>
                </div>
            </div>
        </nav>

        <div class="container mt-3">
            <!-- 资产统计卡片 -->
            <div class="row g-4 mb-4">
                <div class="col-md-6 col-lg-3">
                    <div class="card h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <p class="text-sm text-muted mb-1">总资产</p>
                                    <h3 class="mb-0">{{ dashboardData.totalAssets }}</h3>
                                    <p class="text-sm text-success mt-2">
                                        <i class="fa fa-arrow-up"></i> 12.5% <span class="text-muted">较上月</span>
                                    </p>
                                </div>
                                <div class="bg-primary bg-opacity-10 p-3 rounded">
                                    <i class="fa fa-cubes text-primary"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="card h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <p class="text-sm text-muted mb-1">在用资产</p>
                                    <h3 class="mb-0">{{ dashboardData.activeAssets }}</h3>
                                    <p class="text-sm text-success mt-2">
                                        <i class="fa fa-arrow-up"></i> 8.2% <span class="text-muted">较上月</span>
                                    </p>
                                </div>
                                <div class="bg-success bg-opacity-10 p-3 rounded">
                                    <i class="fa fa-check-circle text-success"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="card h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <p class="text-sm text-muted mb-1">维修中</p>
                                    <h3 class="mb-0">{{ dashboardData.repairingAssets }}</h3>
                                    <p class="text-sm text-warning mt-2">
                                        <i class="fa fa-arrow-up"></i> 3.1% <span class="text-muted">较上月</span>
                                    </p>
                                </div>
                                <div class="bg-warning bg-opacity-10 p-3 rounded">
                                    <i class="fa fa-wrench text-warning"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="card h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <p class="text-sm text-muted mb-1">总价值(元)</p>
                                    <h3 class="mb-0">{{ dashboardData.totalValue }}</h3>
                                    <p class="text-sm text-success mt-2">
                                        <i class="fa fa-arrow-up"></i> 15.3% <span class="text-muted">较上月</span>
                                    </p>
                                </div>
                                <div class="bg-info bg-opacity-10 p-3 rounded">
                                    <i class="fa fa-rmb text-info"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 搜索面板 -->
            <div class="search-panel">
                <form @submit.prevent="searchReports">
                    <div class="row g-2 align-items-center">
                        <div class="col-md-2">
                            <label for="startDate" class="form-label">开始日期</label>
                            <input type="date" class="form-control form-control-sm" v-model="searchParams.startDate">
                        </div>
                        <div class="col-md-2">
                            <label for="endDate" class="form-label">结束日期</label>
                            <input type="date" class="form-control form-control-sm" v-model="searchParams.endDate">
                        </div>
                        <div class="col-md-2">
                            <label for="statusFilter" class="form-label">资产状态</label>
                            <select class="form-select form-control-sm" v-model="searchParams.status">
                                <option value="全部">全部</option>
                                <option v-for="status in config.statuses" :value="status">{{ status }}</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="categoryFilter" class="form-label">资产大类</label>
                            <select class="form-select form-control-sm" v-model="searchParams.category">
                                <option value="全部">全部</option>
                                <option v-for="category in config.categories" :value="category">{{ category }}</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label for="departmentFilter" class="form-label">所属部门</label>
                            <input type="text" class="form-control form-control-sm" v-model="searchParams.department">
                        </div>
                        <div class="col-md-2">
                            <div class="d-flex flex-column gap-2">
                                <button @click="exportToExcel" class="btn btn-success btn-sm btn-animated">
                                    <i class="fa fa-download me-2"></i>导出Excel
                                </button>
                                <button type="submit" class="btn btn-primary btn-sm btn-animated">
                                    <i class="fa fa-search me-2"></i>查询
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <!-- 资产列表 -->
            <div class="card">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead class="table-dark">
                            <tr>
                                <th>ID</th>
                                <th>编号</th>
                                <th>名称</th>
                                <th>大类</th>
                                <th>小类</th>
                                <th>-</th>
                                <th>价值</th>
                                <th>状态</th>
                                <th>部门</th>
                                <th>存放</th>
                                <th>购买日期</th>
                                <th>详情</th>
                                <th>图片</th>
                                <th>-</th>
                                <th>上报时间</th>
                                <th v-if="isAdmin">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-if="loading">
                                <td colspan="16" class="text-center py-3">
                                    <div class="loading-spinner"></div>
                                    <span class="ms-2">加载中...</span>
                                </td>
                            </tr>
                            <tr v-else-if="reports.length === 0">
                                <td colspan="16" class="text-center text-muted py-3">
                                    <i class="fa fa-search-minus me-2"></i>没有找到符合条件的记录
                                </td>
                            </tr>
                            <tr v-for="report in reports" :key="report.id">
                                <td>{{ report.id }}</td>
                                <td>{{ report.asset_number || '' }}</td>
                                <td>{{ report.asset_name }}</td>
                                <td>{{ report.category_main || '未分类' }}</td>
                                <td>{{ report.category_sub || '' }}</td>
                                <td>{{ report.unit || '' }}</td>
                                <td>{{ report.value || 0 }}</td>
                                <td>
                                    <span :class="getStatusClass(report.status)">
                                        {{ report.status || '正常' }}
                                    </span>
                                </td>
                                <td>{{ report.department || '未知部门' }}</td>
                                <td>{{ report.location || '' }}</td>
                                <td>{{ report.purchase_date || '' }}</td>
                                <td>{{ report.description || '' }}</td>
                                <td>
                                    <div class="image-container">
                                        <template v-if="report.images && report.images.length > 0">
                                            <a v-for="(img, index) in report.images" :key="index" :href="img"
                                                target="_blank">
                                                <img :src="img" class="asset-image" alt="资产图片">
                                            </a>
                                        </template>
                                        <span v-else class="text-muted">无图片</span>
                                    </div>
                                </td>
                                <td>{{ report.username || '' }}</td>
                                <td>{{ formatDateTime(report.created_at) }}</td>
                                <td v-if="isAdmin">
                                    <button class="btn btn-sm btn-primary action-btn"
                                        @click="showEditReportModal(report)">
                                        <i class="fa fa-pencil me-1"></i>改
                                    </button>
                                    <button class="btn btn-sm btn-danger action-btn"
                                        @click="showDeleteModal(report.id)">
                                        <i class="fa fa-trash me-1"></i>删
                                    </button>
                                    <button class="btn btn-sm btn-info action-btn" @click="duplicateReport(report.id)">
                                        <i class="fa fa-copy me-1"></i>复制新增
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="card-footer d-flex flex-column flex-md-row justify-content-between align-items-center">
                    <div class="text-sm text-muted mb-2 mb-md-0">
                        显示 {{ pagination.startItem }}-{{ pagination.endItem }} 条，共 {{ pagination.totalItems }} 条记录
                    </div>
                    <nav>
                        <ul class="pagination pagination-sm mb-0">
                            <li class="page-item" :class="{ disabled: pagination.currentPage === 1 }">
                                <a class="page-link" href="#" @click.prevent="prevPage" aria-label="上一页">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li v-for="page in paginationPages" :key="page" class="page-item"
                                :class="{ active: page === pagination.currentPage }">
                                <a class="page-link" href="#" @click.prevent="goToPage(page)">{{ page }}</a>
                            </li>
                            <li class="page-item"
                                :class="{ disabled: pagination.currentPage === pagination.totalPages }">
                                <a class="page-link" href="#" @click.prevent="nextPage" aria-label="下一页">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <footer class="mt-auto py-3">
            <div class="container">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
                    <p class="text-sm text-muted mb-2 mb-md-0">© 2025 资产管理系统. TIMI开发</p>
                    <div class="footer-links">
                        <a href="#" class="text-muted">
                            <i class="fa fa-question-circle mr-1"></i> 帮助中心
                        </a>
                        <a href="#" class="text-muted">
                            <i class="fa fa-file-text-o mr-1"></i> 使用手册
                        </a>
                        <a href="#" class="text-muted">
                            <i class="fa fa-envelope-o mr-1"></i> 联系我们
                        </a>
                    </div>
                </div>
            </div>
        </footer>

        <!-- 删除确认模态框 -->
        <div class="modal fade" id="deleteReportModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">确认删除资产记录</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="text-center mb-4">
                            <div
                                class="d-inline-flex align-items-center justify-content-center w-16 h-16 rounded-circle bg-danger bg-opacity-10 mb-3">
                                <i class="fa fa-exclamation-triangle text-danger fs-4"></i>
                            </div>
                            <p>确定要删除这条资产记录吗？</p>
                            <p class="text-danger"><strong>警告：</strong>此操作将永久删除记录及相关图片，无法恢复！</p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger btn-animated" @click="confirmDelete">确认删除</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 修改编辑模态框部分 -->
        <div class="modal fade" id="editReportModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header py-2">
                        <h5 class="modal-title">编辑资产记录</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-3">
                        <form id="editReportForm">
                            <input type="hidden" v-model="editForm.id">
                            <div class="row g-2">
                                <div class="col-md-6">
                                    <label class="form-label mb-1">资产编号</label>
                                    <input type="text" class="form-control form-control-sm"
                                        v-model="editForm.asset_number">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label mb-1">资产名称*</label>
                                    <input type="text" class="form-control form-control-sm"
                                        v-model="editForm.asset_name" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label mb-1">大类*</label>
                                    <select class="form-select form-select-sm" v-model="editForm.category_main"
                                        required>
                                        <option v-for="category in config.categories" :value="category">{{ category }}
                                        </option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label mb-1">小类</label>
                                    <input type="text" class="form-control form-control-sm"
                                        v-model="editForm.category_sub">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label mb-1">单位*</label>
                                    <select class="form-select form-select-sm" v-model="editForm.unit" required>
                                        <option v-for="unit in config.units" :value="unit">{{ unit }}</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label mb-1">价值*</label>
                                    <input type="number" class="form-control form-control-sm" v-model="editForm.value"
                                        required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label mb-1">状态*</label>
                                    <select class="form-select form-select-sm" v-model="editForm.status" required>
                                        <option v-for="status in config.statuses" :value="status">{{ status }}</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label mb-1">所属部门*</label>
                                    <input type="text" class="form-control form-control-sm"
                                        v-model="editForm.department" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label mb-1">存放位置*</label>
                                    <input type="text" class="form-control form-control-sm" v-model="editForm.location"
                                        required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label mb-1">使用年限(年)</label>
                                    <input type="number" class="form-control form-control-sm"
                                        v-model="editForm.service_life" min="0" step="1">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label mb-1">折旧率(%)</label>
                                    <input type="number" class="form-control form-control-sm"
                                        v-model="editForm.depreciation_rate" min="0" max="100" step="0.1">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label mb-1">购买日期</label>
                                    <input type="date" class="form-control form-control-sm"
                                        v-model="editForm.purchase_date">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label mb-1">生产厂商</label>
                                    <input type="text" class="form-control form-control-sm"
                                        v-model="editForm.manufacturer">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label mb-1">型号</label>
                                    <input type="text" class="form-control form-control-sm" v-model="editForm.model">
                                </div>
                                <div class="col-12">
                                    <label class="form-label mb-1">详细描述</label>
                                    <textarea class="form-control form-control-sm" v-model="editForm.description"
                                        rows="2"></textarea>
                                </div>
                                <!-- 修改编辑模态框中的图片预览部分 -->
                                <div class="col-12 mt-2">
                                    <label class="form-label mb-1">图片</label>
                                    <div class="image-container mb-2 d-flex flex-wrap gap-2">
                                        <!-- 现有图片预览 -->
                                        <div v-for="(img, index) in editForm.existingImages" :key="'existing-'+index"
                                            class="position-relative">
                                            <a :href="img" target="_blank">
                                                <img :src="img" class="asset-image" alt="资产图片">
                                            </a>
                                            <button type="button"
                                                class="btn-close btn-close-white position-absolute top-0 end-0 bg-danger rounded-circle p-1"
                                                @click="deleteExistingImage(index)"></button>
                                        </div>

                                        <!-- 新上传图片预览 -->
                                        <div v-for="(preview, index) in editForm.newImagePreviews" :key="'new-'+index"
                                            class="position-relative">
                                            <img :src="preview" class="asset-image" alt="预览图片">
                                            <button type="button"
                                                class="btn-close btn-close-white position-absolute top-0 end-0 bg-danger rounded-circle p-1"
                                                @click="deleteNewImage(index)"></button>
                                        </div>
                                    </div>

                                    <div class="mb-2">
                                        <label class="form-label mb-1">上传新图片 (最多3张)</label>
                                        <input type="file" class="form-control form-control-sm"
                                            @change="handleImageUpload" multiple accept="image/*" ref="fileInput">
                                        <div class="form-text">支持JPEG、PNG格式，每张图片不超过1MB</div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer py-2">
                        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary btn-sm btn-animated"
                            @click="saveEditReport">保存修改</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 添加资产模态框 -->
        <div class="modal fade" id="addReportModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header py-2">
                        <h5 class="modal-title">新增资产记录</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-3">
                        <form id="addReportForm">
                            <div class="row g-2">
                                <div class="col-md-6">
                                    <label for="addAssetNumber" class="form-label mb-1">资产编号</label>
                                    <input type="text" class="form-control form-control-sm" id="addAssetNumber"
                                        required>
                                </div>
                                <div class="col-md-6">
                                    <label for="addAssetName" class="form-label mb-1">资产名称*</label>
                                    <input type="text" class="form-control form-control-sm" id="addAssetName" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="addCategoryMain" class="form-label mb-1">大类*</label>
                                    <select class="form-select form-select-sm" id="addCategoryMain" required>
                                        <!-- 动态加载 -->
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="addCategorySub" class="form-label mb-1">小类</label>
                                    <input type="text" class="form-control form-control-sm" id="addCategorySub">
                                </div>
                                <div class="col-md-4">
                                    <label for="addUnit" class="form-label mb-1">单位*</label>
                                    <select class="form-select form-select-sm" id="addUnit" required>
                                        <!-- 动态加载 -->
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="addValue" class="form-label mb-1">价值*</label>
                                    <input type="number" class="form-control form-control-sm" id="addValue" min="0"
                                        step="0.01" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="addStatus" class="form-label mb-1">状态*</label>
                                    <select class="form-select form-select-sm" id="addStatus" required>
                                        <!-- 动态加载 -->
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="addDepartment" class="form-label mb-1">所属部门*</label>
                                    <input type="text" class="form-control form-control-sm" id="addDepartment" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="addLocation" class="form-label mb-1">存放位置*</label>
                                    <input type="text" class="form-control form-control-sm" id="addLocation" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="addServiceLife" class="form-label mb-1">使用年限(年)</label>
                                    <input type="number" class="form-control form-control-sm" id="addServiceLife"
                                        min="1">
                                </div>
                                <div class="col-md-4">
                                    <label for="addDepreciationRate" class="form-label mb-1">折旧率(%)</label>
                                    <input type="number" class="form-control form-control-sm" id="addDepreciationRate"
                                        min="0" max="100" step="0.1">
                                </div>
                                <div class="col-md-4">
                                    <label for="addPurchaseDate" class="form-label mb-1">购买日期</label>
                                    <input type="date" class="form-control form-control-sm" id="addPurchaseDate">
                                </div>
                                <div class="col-md-6">
                                    <label for="addManufacturer" class="form-label mb-1">生产厂商</label>
                                    <input type="text" class="form-control form-control-sm" id="addManufacturer">
                                </div>
                                <div class="col-md-6">
                                    <label for="addModel" class="form-label mb-1">型号</label>
                                    <input type="text" class="form-control form-control-sm" id="addModel">
                                </div>
                                <div class="col-12">
                                    <label for="addDescription" class="form-label mb-1">详细描述</label>
                                    <textarea class="form-control form-control-sm" id="addDescription"
                                        rows="2"></textarea>
                                </div>
                                <div class="col-12 mt-2">
                                    <label class="form-label mb-1">图片</label>
                                    <div id="addImagePreview" class="image-container mb-2 d-flex flex-wrap gap-2"></div>
                                    <div class="mb-2">
                                        <label for="addImages" class="form-label mb-1">上传图片 (最多3张)</label>
                                        <input type="file" class="form-control form-control-sm" id="addImages"
                                            name="images" multiple accept="image/*">
                                        <div class="form-text">支持JPEG、PNG格式，每张图片不超过1MB</div>
                                    </div>
                                    <div id="addImagePreviewContainer" class="d-flex flex-wrap gap-2 mb-2"></div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer py-2">
                        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary btn-sm btn-animated" id="saveAddReport">保存</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 查看图片模态框 -->
        <div class="modal fade" id="viewImageModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content bg-transparent border-0">
                    <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-3"
                        data-bs-dismiss="modal" aria-label="Close"></button>
                    <div class="modal-body p-0 text-center">
                        <img id="viewImage" src="" alt="资产图片" class="img-fluid rounded" style="max-height: 80vh;">
                    </div>
                </div>
            </div>
        </div>

        <script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script>
            const { createApp, ref, reactive, computed, onMounted } = Vue;

            createApp({
                setup() {
                    const fileInput = ref(null);

                    // 状态管理
                    const loading = ref(true);
                    const isAdmin = ref(false);
                    const reports = ref([]);
                    const dashboardData = reactive({
                        totalAssets: 0,
                        activeAssets: 0,
                        repairingAssets: 0,
                        totalValue: 0
                    });

                    // 配置数据
                    const config = reactive({
                        categories: [],
                        units: [],
                        statuses: ['正常', '维修中', '报废', '闲置'] // 默认状态选项
                    });

                    // 搜索参数
                    const searchParams = reactive({
                        startDate: '',
                        endDate: '',
                        status: '全部',
                        department: '',
                        category: '全部'
                    });

                    // 分页管理
                    const pagination = reactive({
                        currentPage: 1,
                        pageSize: 50,
                        totalItems: 0,
                        totalPages: 0,
                        startItem: 0,
                        endItem: 0
                    });

                    // 模态框实例
                    const deleteReportModal = ref(null);
                    const editReportModal = ref(null);
                    const addReportModal = ref(null);
                    const viewImageModal = ref(null);

                    // 当前操作的数据
                    const currentDeleteId = ref(null);

                    // 编辑表单数据
                    const editForm = reactive({
                        id: '',
                        asset_number: '',
                        asset_name: '',
                        category_main: '',
                        category_sub: '',
                        unit: '',
                        value: '',
                        status: '正常',
                        department: '',
                        location: '',
                        service_life: '',
                        depreciation_rate: '',
                        purchase_date: '',
                        manufacturer: '',
                        model: '',
                        description: '',
                        existingImages: [],
                        newImages: [],
                        imagesToDelete: [] // 新增：记录要删除的图片
                    });

                    // 计算属性
                    const paginationPages = computed(() => {
                        const pages = [];
                        const startPage = Math.max(1, pagination.currentPage - 2);
                        const endPage = Math.min(pagination.totalPages, startPage + 4);

                        for (let i = startPage; i <= endPage; i++) {
                            pages.push(i);
                        }
                        return pages;
                    });

                    // 初始化
                    onMounted(async () => {
                        // 设置默认日期
                        const today = new Date();
                        const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
                        searchParams.startDate = formatDate(firstDayOfMonth);
                        searchParams.endDate = formatDate(today);

                        // 创建模态框实例
                        deleteReportModal.value = new bootstrap.Modal(document.getElementById('deleteReportModal'));
                        editReportModal.value = new bootstrap.Modal(document.getElementById('editReportModal'));
                        addReportModal.value = new bootstrap.Modal(document.getElementById('addReportModal'));
                        viewImageModal.value = new bootstrap.Modal(document.getElementById('viewImageModal'));

                        // 检查管理员权限
                        isAdmin.value = await checkAdmin();

                        // 加载配置和报表数据
                        await loadConfig();
                        await loadReports();
                        await loadDashboardData();
                    });

                    // 方法定义
                    async function checkAdmin() {
                        try {
                            const response = await fetch('/api/users');
                            return response.ok;
                        } catch (error) {
                            console.error('权限检查失败:', error);
                            return false;
                        }
                    }

                    async function loadConfig() {
                        try {
                            const response = await fetch('/public/config.json');
                            if (!response.ok) throw new Error('加载配置失败');
                            const data = await response.json();

                            // 更新配置
                            config.categories = data.categories || [];
                            config.units = data.units || [];
                            // config.category_main = data.category_main || [];

                            // 如果配置中有状态选项，使用配置的，否则使用默认的
                            if (data.statuses && data.statuses.length > 0) {
                                config.statuses = data.statuses;
                            }
                        } catch (error) {
                            console.error('加载配置失败:', error);
                            // 如果加载失败，使用默认状态选项
                            // config.statuses = ['正常', '维修中', '报废', '闲置'];
                        }
                    }

                    async function loadDashboardData() {
                        try {
                            const response = await fetch('/dashboard');
                            if (!response.ok) throw new Error('获取仪表盘数据失败');
                            const data = await response.json();

                            dashboardData.totalAssets = data.totalAssets || 0;
                            dashboardData.activeAssets = data.activeAssets || 0;
                            dashboardData.repairingAssets = data.repairingAssets || 0;
                            dashboardData.totalValue = data.totalValue || 0;
                        } catch (error) {
                            console.error('加载仪表盘数据失败:', error);
                        }
                    }

                    async function loadReports() {
                        try {
                            loading.value = true;

                            let url = `/api/reports?page=${pagination.currentPage}&pageSize=${pagination.pageSize}`;
                            if (searchParams.startDate) url += `&start_date=${encodeURIComponent(searchParams.startDate)}`;
                            if (searchParams.endDate) url += `&end_date=${encodeURIComponent(searchParams.endDate)}`;
                            if (searchParams.status !== '全部') url += `&status=${encodeURIComponent(searchParams.status)}`;
                            if (searchParams.department) url += `&department=${encodeURIComponent(searchParams.department)}`;
                            if (searchParams.category !== '全部') url += `&category=${encodeURIComponent(searchParams.category)}`;

                            const response = await fetch(url);
                            if (!response.ok) throw new Error(`获取数据失败: ${response.status}`);

                            const data = await response.json();

                            // 更新分页信息
                            pagination.totalItems = data.pagination?.total || 0;
                            pagination.totalPages = data.pagination?.totalPages || 1;
                            pagination.currentPage = data.pagination?.currentPage || 1;

                            // 计算当前显示范围
                            pagination.startItem = pagination.totalItems > 0 ?
                                (pagination.currentPage - 1) * pagination.pageSize + 1 : 0;
                            pagination.endItem = pagination.totalItems > 0 ?
                                Math.min(pagination.currentPage * pagination.pageSize, pagination.totalItems) : 0;

                            // 更新报告数据
                            reports.value = data.data || [];
                        } catch (error) {
                            console.error('加载报告数据失败:', error);
                            reports.value = [];
                        } finally {
                            loading.value = false;
                        }
                    }

                    function searchReports() {
                        pagination.currentPage = 1;
                        loadReports();
                    }

                    function prevPage() {
                        if (pagination.currentPage > 1) {
                            pagination.currentPage--;
                            loadReports();
                        }
                    }

                    function nextPage() {
                        if (pagination.currentPage < pagination.totalPages) {
                            pagination.currentPage++;
                            loadReports();
                        }
                    }

                    function goToPage(page) {
                        if (page !== pagination.currentPage) {
                            pagination.currentPage = page;
                            loadReports();
                        }
                    }

                    function showDeleteModal(reportId) {
                        currentDeleteId.value = reportId;
                        deleteReportModal.value.show();
                    }

                    async function confirmDelete() {
                        try {
                            const response = await fetch(`/api/reports/${currentDeleteId.value}`, {
                                method: 'DELETE'
                            });

                            if (!response.ok) {
                                const errorData = await response.json();
                                throw new Error(errorData.error || '删除失败');
                            }

                            const data = await response.json();
                            if (data.success) {
                                await loadReports();
                                deleteReportModal.value.hide();
                            }
                        } catch (error) {
                            console.error('删除失败:', error);
                            alert('删除失败: ' + error.message);
                        }
                    }

                    function showEditReportModal(report) {
                        // 重置图片相关字段
                        editForm.imagesToDelete = [];
                        editForm.newImages = [];
                        editForm.newImagePreviews = [];

                        // 填充表单数据
                        Object.assign(editForm, {
                            id: report.id,
                            asset_number: report.asset_number || '',
                            asset_name: report.asset_name || '',
                            category_main: report.category_main || '',
                            category_sub: report.category_sub || '',
                            unit: report.unit || '',
                            value: report.value || '',
                            status: report.status || '正常',
                            department: report.department || '',
                            location: report.location || '',
                            service_life: report.service_life || '',
                            depreciation_rate: report.depreciation_rate || '',
                            purchase_date: report.purchase_date || '',
                            manufacturer: report.manufacturer || '',
                            model: report.model || '',
                            description: report.description || '',
                            existingImages: report.images ? [...report.images] : [],
                            newImages: [],
                            newImagePreviews: [],
                            imagesToDelete: []
                        });

                        editReportModal.value.show();
                    }

                    function handleImageUpload(event) {
                        const files = event.target.files;
                        if (!files || files.length === 0) return;

                        // 检查总图片数量是否超过限制
                        const totalImages = editForm.existingImages.length + editForm.newImages.length + files.length;
                        if (totalImages > 3) {
                            alert('最多只能上传3张图片');
                            event.target.value = '';
                            return;
                        }

                        // 添加新图片和预览
                        for (let i = 0; i < files.length; i++) {
                            const file = files[i];

                            // 验证文件类型和大小
                            if (!file.type.match('image.*')) {
                                alert('请上传图片文件');
                                continue;
                            }

                            if (file.size > 1024 * 1024) {
                                alert('图片大小不能超过1MB');
                                continue;
                            }

                            // 创建预览
                            const reader = new FileReader();
                            reader.onload = (e) => {
                                if (!editForm.newImagePreviews) {
                                    editForm.newImagePreviews = [];
                                }
                                editForm.newImagePreviews.push(e.target.result);
                            };
                            reader.readAsDataURL(file);

                            // 添加到新图片数组
                            editForm.newImages.push(file);
                        }

                        // 重置文件输入
                        if (fileInput.value) {
                            fileInput.value.value = '';
                        }
                    }

                    function deleteExistingImage(index) {
                        if (confirm('确定要删除这张图片吗？')) {
                            // 从现有图片列表中移除
                            const [deletedImage] = editForm.existingImages.splice(index, 1);

                            // 添加到删除列表（确保只存储文件名）
                            if (deletedImage) {
                                const fileName = deletedImage.split('/').pop();
                                editForm.imagesToDelete.push(fileName);
                            }
                        }
                    }

                    // 更新deleteNewImage方法
                    function deleteNewImage(index) {
                        editForm.newImages.splice(index, 1);
                        editForm.newImagePreviews.splice(index, 1);
                    }

                    async function saveEditReport() {
                        try {
                            const formData = new FormData();

                            // 处理现有图片 - 只保留文件名部分
                            const existingImageNames = editForm.existingImages.map(img => img.split('/').pop());

                            // 准备要发送的数据对象
                            formData.append('id', editForm.id);
                            formData.append('asset_number', editForm.asset_number || '');
                            formData.append('asset_name', editForm.asset_name);
                            formData.append('category_main', editForm.category_main);
                            formData.append('category_sub', editForm.category_sub || '');
                            formData.append('unit', editForm.unit);
                            formData.append('value', editForm.value);
                            formData.append('status', editForm.status);
                            formData.append('department', editForm.department);
                            formData.append('location', editForm.location);
                            formData.append('service_life', editForm.service_life || '');
                            formData.append('depreciation_rate', editForm.depreciation_rate || '');
                            formData.append('purchase_date', editForm.purchase_date || '');
                            formData.append('manufacturer', editForm.manufacturer || '');
                            formData.append('model', editForm.model || '');
                            formData.append('description', editForm.description || '');

                            // 关键修改：明确处理图片参数
                            formData.append('existing_images', existingImageNames.join(','));
                            formData.append('images_to_delete', editForm.imagesToDelete.join(','));

                            // 添加新图片
                            editForm.newImages.forEach(file => {
                                formData.append('images', file);
                            });

                            // 显示加载状态
                            const saveBtn = document.querySelector('#editReportModal .btn-primary');
                            saveBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 保存中...';
                            saveBtn.disabled = true;

                            // 发送请求
                            const response = await fetch(`/api/reports/${editForm.id}`, {
                                method: 'PUT',
                                body: formData
                            });

                            if (!response.ok) {
                                throw new Error('更新失败');
                            }

                            const data = await response.json();
                            if (data.success) {
                                await loadReports();
                                editReportModal.value.hide();
                                alert('更新成功');
                            }
                        } catch (error) {
                            console.error('更新失败:', error);
                            alert('更新失败: ' + (error.message || '未知错误'));
                        } finally {
                            const saveBtn = document.querySelector('#editReportModal .btn-primary');
                            if (saveBtn) {
                                saveBtn.innerHTML = '保存修改';
                                saveBtn.disabled = false;
                            }
                        }
                    }



                    async function duplicateReport(reportId) {
                        try {
                            // 获取原始报告数据
                            const response = await fetch(`/api/reports/${reportId}`);
                            if (!response.ok) throw new Error('获取记录详情失败');
                            const originalReport = await response.json();

                            // 创建FormData对象
                            const formData = new FormData();

                            // 核心必填字段
                            formData.append('asset_number', '');
                            formData.append('asset_name', `${originalReport.asset_name}`);
                            formData.append('category_main', originalReport.category_main);
                            formData.append('unit', originalReport.unit || '台');
                            formData.append('value', originalReport.value || 0);
                            formData.append('status', originalReport.status || '正常');
                            formData.append('department', originalReport.department);
                            formData.append('location', originalReport.location);

                            // 可选字段
                            if (originalReport.service_life) {
                                formData.append('service_life', Number(originalReport.service_life));
                            }
                            if (originalReport.depreciation_rate) {
                                formData.append('depreciation_rate', Number(originalReport.depreciation_rate));
                            }
                            if (originalReport.purchase_date) {
                                formData.append('purchase_date', originalReport.purchase_date);
                            }

                            // 其他字段
                            ['category_sub', 'manufacturer', 'model', 'description'].forEach(field => {
                                if (originalReport[field] !== undefined) {
                                    formData.append(field, originalReport[field] || '');
                                }
                            });

                            // 提交复制请求
                            const createResponse = await fetch('/api/reports', {
                                method: 'POST',
                                body: formData
                            });

                            if (!createResponse.ok) {
                                throw new Error(`HTTP错误 ${createResponse.status}`);
                            }

                            const result = await createResponse.json();
                            if (result.success) {
                                await loadReports();
                                alert('复制新增成功');
                            } else {
                                throw new Error(result.message || '创建失败');
                            }
                        } catch (error) {
                            console.error('复制新增失败:', error);
                            alert(`复制新增失败: ${error.message}`);
                        }
                    }

                    async function exportToExcel() {
                        try {
                            let url = `/api/reports/export?start_date=${encodeURIComponent(searchParams.startDate)}&end_date=${encodeURIComponent(searchParams.endDate)}`;
                            if (searchParams.department) url += `&department=${encodeURIComponent(searchParams.department)}`;
                            if (searchParams.status !== '全部') url += `&status=${encodeURIComponent(searchParams.status)}`;
                            if (searchParams.category !== '全部') url += `&category=${encodeURIComponent(searchParams.category)}`;

                            const response = await fetch(url);
                            if (!response.ok) throw new Error('获取数据失败');

                            const { data: reports } = await response.json();

                            if (!reports || reports.length === 0) {
                                throw new Error('没有可导出的数据');
                            }

                            const excelData = formatReportsForExcel(reports);
                            downloadExcelFile(excelData, `资产记录_${new Date().toISOString().slice(0, 10)}.xlsx`);

                            alert(`导出成功，共导出 ${reports.length} 条记录`);
                        } catch (error) {
                            console.error('导出失败:', error);
                            alert(`导出失败: ${error.message}`);
                        }
                    }

                    // 工具方法
                    function formatDate(date) {
                        const year = date.getFullYear();
                        const month = String(date.getMonth() + 1).padStart(2, '0');
                        const day = String(date.getDate()).padStart(2, '0');
                        return `${year}-${month}-${day}`;
                    }

                    function formatDateTime(dateString) {
                        const date = new Date(dateString);
                        return date.toLocaleString();
                    }

                    function getStatusClass(status) {
                        return `status-badge ${status === '正常' ? 'status-normal' :
                            status === '维修中' ? 'status-repairing' :
                                status === '报废' ? 'status-scrapped' : 'status-idle'
                            }`;
                    }

                    function formatReportsForExcel(reports) {
                        const headers = [
                            'ID', '资产编号', '资产名称', '主分类', '子分类', '单位',
                            '价值(元)', '状态', '所属部门', '存放位置', '使用年限',
                            '折旧率(%)', '购买日期', '生产厂商', '型号', '详细描述',
                            '上报人', '上报时间'
                        ];

                        const rows = reports.map(report => [
                            report.id,
                            report.asset_number,
                            report.asset_name,
                            report.category_main,
                            report.category_sub || '无',
                            report.unit,
                            report.value,
                            report.status,
                            report.department,
                            report.location,
                            report.service_life || '无',
                            report.depreciation_rate || '无',
                            report.purchase_date || '无',
                            report.manufacturer || '无',
                            report.model || '无',
                            report.description || '无',
                            report.username,
                            new Date(report.created_at).toLocaleString()
                        ]);

                        return { headers, rows };
                    }

                    function downloadExcelFile(data, filename) {
                        const wb = XLSX.utils.book_new();
                        const ws = XLSX.utils.aoa_to_sheet([data.headers, ...data.rows]);
                        XLSX.utils.book_append_sheet(wb, ws, '资产记录');
                        XLSX.writeFile(wb, filename);
                    }

                    // 返回在模板中使用的变量和方法
                    return {
                        loading,
                        isAdmin,
                        reports,
                        dashboardData,
                        config,
                        searchParams,
                        pagination,
                        paginationPages,
                        editForm,

                        loadReports,
                        searchReports,
                        prevPage,
                        nextPage,
                        goToPage,
                        showDeleteModal,
                        confirmDelete,
                        showEditReportModal,
                        handleImageUpload,
                        deleteExistingImage,
                        deleteNewImage,
                        saveEditReport,
                        duplicateReport,
                        exportToExcel,
                        formatDateTime,
                        getStatusClass
                    };
                }
            }).mount('#app');
        </script>
</body>

</html>